<template>
    <div>
        <van-tabs v-model="activeName" @click="channelClick">
            <van-tab v-for="item in brotherCategory" :key="item.id" :title="item.name" :name="item.id">
                <h2>{{item.name}}</h2>
                <p>{{item.front_name}}</p>
                <div>
                    <h4></h4>
                    <Chanpin :chanpinArr="goodsList" />
                </div>
            </van-tab>
        </van-tabs>
        <div style="height:50px"></div>
    </div>
</template>

<script>
    import Chanpin from '@/components/Chanpin.vue'
    import {
        GoodsCategoryApi,
        GoodsListApi
    } from "@/request/api"
    import {
        mapState,
        mapGetters,
        mapMutations,
        mapActions
    } from "vuex"
    export default {
        data() {
            return {

                brotherCategory: [],
                goodsList: [],
            }
        },
        computed: {
            ...mapState(["activeName"]),
            activeName: {

                get: function () {
                    return this.$store.state.activeName
                },
                set: function () {}
            }
        },
        methods: {
            ...mapMutations(["activeNamePush"]),
            getGoodsListApi() {
                GoodsListApi({
                    categoryId: this.$route.query.id,
                    size: 1000
                }).then((res) => {
                    // console.log(res);
                    if (res.errno === 0) {
                        // console.log(res.data);
                        let {
                            goodsList
                        } = res.data;
                        this.goodsList = goodsList;
                    }
                });
            },

            channelClick(name, title) {
                this.activeNamePush(name);
                this.$router.push({
                    path: '/channel',
                    query: {
                        "id": name
                    }
                })

                this.getGoodsListApi();

            },

        },
        created() {
            // console.log("目标页面中获取", this.$route.query.id);
            // console.log(this.activeName);

            GoodsCategoryApi({
                id: this.$route.query.id
            }).then((res) => {
                // console.log(res);
                if (res.errno === 0) {
                    // console.log(res.data);
                    let {
                        brotherCategory
                    } = res.data;
                    this.brotherCategory = brotherCategory;
                }
            });

            this.getGoodsListApi();

        },
        components: {
            Chanpin
        },
    }
</script>

<style lang="less" scoped>
    .van-tabs {
        text-align: center;

        h2 {
            font-size: 18px;
            height: 50px;
            line-height: 50px;
        }

        p {
            height: 30px;
            line-height: 30px;
            color: #666;
            margin: 0;
        }

        h4 {
            text-align: center;
            height: 50px;
            line-height: 50px;
            font-size: 18px;
            background: #fff;
        }
    }
</style>